iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0

今天先介紹幾個比較常用的元件,包括Text、Icon、Image及Button。

Text文字元件
(一)介紹
用來顯示文字的元件。
(二)屬性
textAlign:對齊方式。。
maxLines:最大行數
textScaleFactor:縮放因數,預設為1.0。
overflow:超出最大行數時可用省略符號或漸層效果隱藏多餘的行數。
style:設定字體大小、顏色等樣式。
textSpan:實現類似豐富文字的效果。
data:要顯示的文字。
textDirection:文字顯示方向。
https://ithelp.ithome.com.tw/upload/images/20210923/20140524YOt7yoNyCI.png

Icon圖示元件
介紹:相比圖片有著不會失真的優點,用法也相當簡單,而Icon除了支援使用圖示字型之外,還可以傳入圖片。如果好奇的話可以到官方網站查看全部的icon。
網址:https://api.flutter.dev/flutter/material/Icons-class.html
https://ithelp.ithome.com.tw/upload/images/20210923/201405244W4EE22rDp.png

Image圖片元件
(一)介紹
用來顯示電腦內及網路上的圖片的元件,在App中圖片是不可缺少的,加了圖片不僅能美觀還能豐富內容,而且Flutter提供的Image元件操作相當簡單,只需要一行程式碼即可完成。

(二) 方法
Image.asset:載入App指定資料夾內的圖片。
Image.file:載入電腦指定路徑的圖片。
Image.network:載入網路指定網址的圖片。
Image.memory:載入Uint8List的圖片。

(三) 屬性
width:圖片寬度。
height:圖片高度。
fit:圖片填充方式。
https://ithelp.ithome.com.tw/upload/images/20210923/201405242lNvrX5icj.png

Button按鈕元件
(一) Flutter常用的按鈕
RaisedButton:凸起按鈕,點擊時帶有波紋效果,且有陰影及顏色填滿。
FlatButton:扁平化按鈕,較簡潔、扁平,沒有背景,一般用於不明顯的位置上。
IconButton:圖示按鈕,直接使用圖示提醒使用者按鈕的功能。
FloatingActionButton:漂浮按鈕,通常一頁只有一個且擺於右下角,用於分享、導航等等。
OutlineButton:邊框按鈕,點即時邊框和背景呈現反白狀態,通常包含重要的行為,但不是主要動作。

(二)屬性
onPressed:按下按鈕觸發的方法邏輯程式,是最重要的一個。
color:按鈕顏色。
textColor:按鈕中文字的顏色。
elevation:按鈕陰影大小值。
https://ithelp.ithome.com.tw/upload/images/20210923/20140524b9erpcAmRv.png

今天介紹完Flutter的基礎元件,明天將會介紹單一子元素元件,敬請期待。

參考資料
橫跨Android及Apple的神話:用Dart語言神啟Flutter大業3.1節
https://hkt.medium.com/flutter-%E5%9B%9B%E5%A4%A7%E5%9F%BA%E7%A4%8E%E5%85%83%E4%BB%B6%E4%BB%8B%E7%B4%B9-adf21d297162
https://tw-hkt.blogspot.com/2019/08/flutter-text.html
https://iter01.com/430635.html
https://ithelp.ithome.com.tw/articles/10215654
http://tw-hkt.blogspot.com/2019/08/flutter-image.html
https://tw-hkt.blogspot.com/2019/08/flutter-button.html
https://medium.com/flutter-taipei/%E4%BE%86%E5%90%A7-flutter-10-buttons-9d25600ef103


上一篇
Day 10 Dart語言-混合及泛型
下一篇
Day 12單一子元素元件Single-child
系列文
一起學Flutter,和我變Better!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言